<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./js/ctx.js"></script>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
    <table><tbody>
        <tr>
            <td>Threshold</td>
            <td>
                <input type="range" min="0.0" max="1.0" step="0.01" data-bind="value: threshold, valueUpdate: 'input'">
            </td>
        </tr>
    </tbody></table>
</div>

<script>
    var initCesium = new InitCesium();

    var viewer = initCesium.initViewer('cesiumContainer');

	var layers = viewer.scene.imageryLayers;

	// Set oceans on Bing base layer to transparent
	var baseLayer = layers.get(0);
	baseLayer.colorToAlpha = new Cesium.Color(0.0, 0.016, 0.059);
	baseLayer.colorToAlphaThreshold = 0.2;

	// Add a bump layer with adjustable threshold
	var singleTileLayer = layers.addImageryProvider(new Cesium.SingleTileImageryProvider({
		url : './img/igs/earthbump1k.jpg',
		rectangle : Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0)
	}));

	singleTileLayer.colorToAlpha = new Cesium.Color(0.0, 0.0, 0.0, 1.0);
	singleTileLayer.colorToAlphaThreshold = 0.1;

	var viewModel = {
		threshold : singleTileLayer.colorToAlphaThreshold
	};

	Cesium.knockout.track(viewModel);

	var toolbar = document.getElementById('toolbar');
	Cesium.knockout.applyBindings(viewModel, toolbar);

	Cesium.knockout.getObservable(viewModel, 'threshold').subscribe(
		function(newValue) {
			singleTileLayer.colorToAlphaThreshold = parseFloat(viewModel.threshold);
		}
	);


</script>
</body>
</html>